<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
        rem 是一个长度单位，相对于根元素的 font-size 值。常用于响应式布局
        对于不同的设备，rem 值不同，可以保证在不同设备上，页面的布局效果一致。
        px,绝对长度单位
        em，相对长度单位，相对于父元素的font-size值，不常用

        响应式布局的常用方案
        media-query,根据不同的屏幕宽度设置根元素font-size
        rem,基于根元素的相对单位
    -->
    <div class="wrap">
      <div class="child">这个一个子</div>
    </div>
  </body>
  <style>
    html {
      /* font-size: 10px; */
    }
    body {
      font-size: 40px;
    }
    .wrap {
      /* font-size: 12px; */
    }
    .child {
      width: 20em;
      height: 20em;
      border: 1px solid red;
    }
  </style>
</html>
